<template>
  <div class="main-wrap">
    <h4><var-icon name="card-account-details-outline" />报名成为ASG解说</h4>
    <div class="container">
      <var-divider dashed />
      <var-form ref="form" scroll-to-error="start">
        <h4 class="form-title">邮箱账号</h4>
        <var-input
          clearable
          placeholder="请输入邮箱"
          :rules="[(v) => !!v || '邮箱不能为空']"
          v-model="formData.email"
        />
        <h4 class="form-title">第五人格游戏ID</h4>
        <var-input
          clearable
          placeholder="请输入游戏ID"
          :rules="[(v) => !!v || '游戏ID不能为空']"
          v-model="formData.gameId"
        />
        <h4 class="form-title">联系方式（QQ）</h4>
        <var-input
          clearable
          placeholder="请输入联系方式QQ"
          :rules="[(v) => !!v || '联系方式不能为空']"
          v-model="formData.contact"
        />
        <h4 class="form-title">社交媒体账号</h4>
        <var-input
          clearable
          placeholder="请输入联系社交媒体账号"
          :rules="[(v) => !!v || '社交媒体账号不能为空']"
          v-model="formData.social"
        />
        <h4 class="form-title">你的经历</h4>
        <var-input
          clearable
          textarea
          placeholder="请输入简介"
          :rules="[(v) => !!v || '简介不能为空']"
          v-model="formData.introduction"
        />
        <var-button block type="primary" @click="handleSubmit(form)"
          >提交
        </var-button>
      </var-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormValidation } from "@varlet/ui/types/form";

interface formData {
  email?: string;
  gameId?: string;
  introduction?: string;
  contact?: string;
  social?: string;
}
const formData = reactive<formData>({
  email: "",
  gameId: "",
  contact: "",
  introduction: "",
});
const form = ref<FormValidation | null>(null);




const submit = () => {
  const data = {
    com_Email: formData.email,
    idv_id: formData.gameId,
    introduction: formData.introduction,
    com_qq: formData.contact,
    com_Cocial_media: formData.social,
  };
  submitForm(data)
    .then(() => {
      Snackbar.success("报名成功，请等待通知！");
    })
    .catch(() => {
      Snackbar.error("报名失败，请联系管理员！");
    });
};
const handleSubmit = (valid: FormValidation | null) => {
  if (valid === null) {
    return;
  } else {
    valid.validate().then((res) => {
      if (res) {
        submit();
      } else {
        Snackbar.error("请完整填写表单数据！");
      }
    });
  }
};
</script>

<style scoped lang="less">
h4 {
  text-align: center;
  margin: 5px;
  color: #7f7f7f;
}
.container {
  padding: 10px;
}
.var-input {
  margin-bottom: 20px;
}
.form-title {
  text-align: left;
  padding-left: 5px;
  border-left: 5px solid @shaColor;
  color: @darkTextColor;
}
.main-wrap {
  height: calc(100dvh - 54px * 3);
  margin-bottom: 3vh;
  padding-bottom: 2vh;
  overflow: auto;
}
.video-wrap{
  display: block;
  margin:10px auto;
  width:90%;
}
</style>
